<template>
  <view class="page-home">
    <template v-if="pageLoad">
      <view class="tag">{{ pageInfo.typeName }}</view>
      <view class="post">
        <image :src="pageInfo.image" mode="aspectFit" />
        <text>{{ pageInfo.text }}</text>
      </view>
      <template v-if="type === 'student'">
        <button class="ui-btn" @click="goPage('/pages/chart/index')">开始测试</button>
        <button class="ui-btn btn-line" @click="goHistory('parent')">
          想和父母说的话
          <text class="count" v-if="msgCount > 0">{{ msgCount }}</text>
        </button>
        <button class="ui-btn btn-line" @click="goHistory('teacher')">
          想和老师说的话
          <text class="count" v-if="msgCount > 0">{{ msgCount }}</text>
        </button>
      </template>
      <template v-else>
        <button class="ui-btn" @click="goResult">测试结果</button>
        <button class="ui-btn btn-line" @click="goHistory">孩子留言</button>
        <button class="ui-btn btn-line" v-if="type === 'parents'" @click="goHistory('teacher')">
          老师留言
          <text class="count" v-if="msgCount > 0">{{ msgCount }}</text>
        </button>
        <button class="ui-btn btn-line" v-if="type === 'teacher'" @click="goHistory('parent')">
          家长留言
          <text class="count" v-if="msgCount > 0">{{ msgCount }}</text>
        </button>
      </template>
    </template>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { login, unreadCount } from "@/api";
import { useMessageStore } from "@/store/index";

const type = ref("student");
const pageLoad = ref(false);
const msgCount = ref({ unread_count: 0 });
const { setMessageType, clearMessageType } = useMessageStore();

const pageInfoMap = {
  student: {
    text: "宝贝，有我在",
    image: "http://www.xinchengai.top:443/user1.png",
    typeName: "学生版",
  },
  teacher: {
    text: "宝贝，有你在",
    image: "http://www.xinchengai.top:443/user2.png",
    typeName: "教师版",
  },
  parent: {
    text: "用爱浇灌",
    image: "http://www.xinchengai.top:443/user3.png",
    typeName: "家长版",
  },
};

const pageInfo = computed(() => {
  return pageInfoMap[type.value] || {};
});

const getCount = () => {
  unreadCount({
    recipientType: type.value,
  }).then((res) => {
    msgCount.value = res.unread_count;
  });
};

const goPage = (url) => {
  uni.navigateTo({
    url,
  });
};

const goHistory = (type) => {
  setMessageType(type);
  uni.switchTab({
    url: `/pages/history/index`,
  });
};

const goResult = () => {
  const info = uni.getStorageSync("userInfo");
  let url = `/pages/class/index?id=${info?.userinfo?.classid}`;
  if (type.value === "parents") {
    url = `/pages/result/index?id=${info?.userinfo?.student_openid}`;
  }
  goPage(url);
};

const checkLogin = async () => {
  uni.login({
    provider: "weixin",
    onlyAuthorize: true, // 微信登录仅请求授权认证
    success: function (event) {
      const { code } = event;
      login({ code }).then((res) => {
        if (!res?.userinfo?.name && !res?.userinfo?.gender && !res?.userinfo?.class) {
          uni.navigateTo({
            url: "/pages/step/index",
          });
        }
        uni.setStorageSync("userInfo", res);
        pageLoad.value = true;
        getCount();
      });
    },
    fail: function (err) {
      // 登录授权失败
      // err.code是错误码
    },
  });
};

onShow(() => {
  checkLogin();
  clearMessageType();
  const info = uni.getStorageSync("userInfo");
  if (info?.type) {
    type.value = info.type.toLocaleLowerCase();
  }
});
</script>

<style lang="scss">
.page-home {
  display: flex;
  flex-direction: column;
  position: relative;
  .tag {
    position: absolute;
    background: black;
    padding: 0 20rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    border-radius: 40rpx;
    right: 20rpx;
    top: 20rpx;
    color: white;
    font-size: 24rpx;
  }
  .post {
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      height: 400rpx;
      margin: 40rpx;
    }
    text {
      font-size: 32rpx;
      color: #dcdee0;
    }
    margin-bottom: 40rpx;
  }
  .ui-btn {
    background: black;
    width: 80%;
    color: #fff;
    margin-top: 20rpx;
    margin-bottom: 80rpx;
    position: relative;
    .count {
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      background: red;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #fff;
      right: -20rpx;
      top: -20rpx;
      z-index: 10;
      overflow: unset;
    }
  }
  .btn-line {
    background: #fff;
    border-color: black;
    color: black;
  }
}
</style>
